<template>
  <div class="indexList">
    <div v-show="titleRef" :style="fixTitleStyle" class="fixedTitle">
      {{ titleRef }}
    </div>
    <div
      class="shortcut"
      @touchstart.stop.prevent="onTouchstart"
      @touchmove.stop.prevent="onTouchmove"
    >
      <span
        v-for="(s, index) in shortcutList"
        :key="s"
        :class="{ active: index === currentIndex }"
        :data-index="index"
        >{{ s }}</span
      >
    </div>
    <Scroll ref="scrollRef" :probe-type="3" @scroll="onScroll">
      <ul class="wrapper" ref="listWrapper">
        <li v-for="item in data" :key="item.title" class="group">
          <h2>{{ item.title }}</h2>
          <ul class="singers">
            <li v-for="s in item.list" :key="s.id" @click="select(s)">
              <img v-lazy="s.pic" alt="" />
              <span>{{ s.name }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </Scroll>
  </div>
</template>

<script>
// import Scroll from '@/components/Base/Scroll/Scroll'
import Scroll from '@/components/Base/ScrollContainer'
import useFixed from './useFixed'
import useShortcut from './useShortcut'
import { ref } from 'vue'
export default {
  name: 'IndexList',
  components: {
    Scroll
  },
  props: {
    data: {
      required: true,
      type: Array
    }
  },

  emit: ['select'],

  setup(props, { emit }) {
    const scrollRef = ref(null)
    const listWrapper = ref(null)
    const { onScroll, titleRef, fixTitleStyle, currentIndex } = useFixed(
      listWrapper,
      props
    )
    const { shortcutList, onTouchstart, onTouchmove } = useShortcut(
      props,
      scrollRef,
      listWrapper
    )

    return {
      onScroll,
      listWrapper,
      titleRef,
      fixTitleStyle,
      currentIndex,
      shortcutList,
      scrollRef,
      onTouchstart,
      onTouchmove
    }
  },

  methods: {
    select(singer) {
      this.$emit('select', singer)
      this.$router.push(`/singer/${singer.mid}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.indexList {
  position: relative;
  height: 100%;
  overflow: hidden;
  .fixedTitle {
    position: absolute;
    top: 0;
    z-index: 2;
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding-left: 20px;
    font-size: 12px;
    color: #fff;
    background-color: $color-list-title;
  }
  .shortcut {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 4px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    border: 1px solid $color-shortcut;
    background-color: #fff;
    > span {
      display: inline-block;
      padding: 3px;
      color: rgba(0, 0, 0, 0.7);
      font-size: 12px;
      &.active {
        color: $color-shortcut;
      }
    }
  }
  .wrapper {
    .group {
      padding-bottom: 30px;
      h2 {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
        background-color: $color-list-title;
        color: #fff;
      }
      .singers {
        > li {
          display: flex;
          align-items: center;
          padding: 15px 0 15px 30px;
          border-bottom: 1px solid $color-line;
          > img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
          > span {
            margin-left: 20px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
